import { computed, defineComponent, reactive, watchEffect } from "vue";
import styles from "./add.module.less";
import { QuestionCircleFilled } from "@ant-design/icons-vue";
import LPopup from "@/components/public/lPopup/lPopup";
import { ref } from "vue";
import { message } from "ant-design-vue";
import _ from "lodash";
export default defineComponent({
  props: {
    parent: {
      type: Array,
      default: () => {
        return [];
      },
    },
    service: {
      type: Object,
      required: true,
    },
  },
  emits: ['change'],
  setup(props, { expose, emit }) {
    const addPopupRef = ref(null as any);
    // 加载中
    const loading = ref(false);
    // 编辑添加提交中
    const editing = ref(false);
    // 初始化数据
    const ori = {
      menu_id: {
        value: null,
      },
      parent_id: {
        value: null,
        treeData: [],
      },
      menu_type: {
        value: 'M',
      },
      menu_name: {
        value: null,
      },
      order_num: {
        value: 0,
      },
      is_frame: {
        value: 0,
      },
      path: {
        value: null,
      },
      perms: {
        value: null,
      },
      is_cache: {
        value: 1,
      },
      visible: {
        value: "1",
      },
      status: {
        value: "1",
      }
    }
    const state = reactive(_.cloneDeep(ori) as any);
    // 是否为编辑
    const isEdit = computed(() => {
      return !!state.menu_id.value;
    })
    watchEffect(() => {
      state.parent_id.treeData = props.parent || [];
    })
    // 获取菜单配置详情
    const getDetail = () => {
      loading.value = true;
      const hide: any = message.loading('加载中...');
      props.service.detail({ menu_id: state.menu_id.value }).then((res: any) => {
        state.parent_id.value = res.data.parent_id || null;
        state.menu_type.value = res.data.menu_type || 'M';
        state.menu_name.value = res.data.menu_name || null;
        state.order_num.value = res.data.order_num || 0;
        state.is_frame.value = res.data.is_frame || 0;
        state.path.value = res.data.path || null;
        state.perms.value = res.data.perms || null;
        state.is_cache.value = res.data.is_cache || 0;
        state.visible.value = res.data.visible || "0";
        state.status.value = res.data.status || "0";
      }).finally(() => {
        loading.value = false;
        hide();
      })
    }
    // 添加提交
    const addConfirm = () => {
      if (loading.value) {
        return;
      }
      editing.value = true;
      let params: any = {};
      Object.entries(state).forEach((item: any) => {
        params[item[0]] = item[1].value;
      })
      props.service.add(params).then((res: any) => {
        message.success('添加成功');
        emit('change');
        addPopupRef.value.close();
      }).finally(() => {
        editing.value = false;
      })
    }
    // 编辑提交
    const editConfirm = () => {
      if (loading.value) {
        return;
      }
      editing.value = true;
      let params: any = {};
      Object.entries(state).forEach((item: any) => {
        params[item[0]] = item[1].value;
      })
      props.service.edit(params).then((res: any) => {
        message.success('编辑成功');
        emit('change');
        addPopupRef.value.close();
      }).finally(() => {
        editing.value = false;
      })
    }
    //点击保存
    const save = _.debounce(() => {
      isEdit.value ? editConfirm() : addConfirm();
    },500,{ leading: true, trailing: false });
    // 打开弹窗
    const open = (e: any) => {
      Object.entries(_.cloneDeep(ori)).forEach((item: any) => {
        state[item[0]] = item[1];
      })
      e?.parent_id && (state.parent_id.value = e.parent_id);
      if (e?.menu_id) {
        state.menu_id.value = e.menu_id;
        getDetail();
      }
      addPopupRef.value.open();
    }
    expose({ open });
    const Components = () => (
      <LPopup title={isEdit.value ? '编辑菜单' : '添加菜单'} ref={addPopupRef}>
        <div class={styles.menuAdd}>
          <div class={styles.row}>
            <div class={styles.label}>上级菜单:</div>
            <div class={styles.value}>
              <a-tree-select
                style={{ width: "100%" }}
                placeholder="请选择上级菜单，不选即为顶级菜单"
                fieldNames={{ children: 'childlist', label: 'menu_name', value: 'menu_id' }}
                allowClear={true}
                tree-data={state.parent_id.treeData}
                treeDefaultExpandedKeys={[state.parent_id.value]}
                v-model:value={state.parent_id.value}
              ></a-tree-select>
            </div>
          </div>
          <div class={styles.row}>
            <div class={styles.label}>菜单类型:</div>
            <div class={styles.value}>
              <a-radio-group
                v-model:value={state.menu_type.value}
                name="radioGroup"
              >
                <a-radio value="M">目录</a-radio>
                <a-radio value="C">菜单</a-radio>
                <a-radio value="F">按钮</a-radio>
              </a-radio-group>
            </div>
          </div>
          <div class={[styles.row, styles.rowHalf]}>
            <div class={styles.label}>菜单名称:</div>
            <div class={styles.value}>
              <a-input
                v-model:value={state.menu_name.value}
                placeholder="请输入菜单名称"
              ></a-input>
            </div>
          </div>
          <div class={[styles.row, styles.rowHalf]}>
            <div class={styles.label}>显示排序:</div>
            <div class={styles.value}>
              <a-input-number v-model:value={state.order_num.value} min={0} style={{ width: "100%" }} />
            </div>
          </div>
          {
            state.menu_type.value !== 'F' && (
              <div class={[styles.row, styles.rowHalf]}>
                <div class={styles.label}>
                  <a-tooltip placement="top" v-slots={{
                    title: () => (
                      <span class={styles.tooltip}>选择是外链则路由地址需要以`http(s)://`开头</span>
                    )
                  }}>
                    <QuestionCircleFilled class={styles.infoIcon} />
                  </a-tooltip>
                  是否外链:
                </div>
                <div class={styles.value}>
                  <a-radio-group
                    v-model:value={state.is_frame.value}
                    name="radioGroup"
                  >
                    <a-radio value={1}>是</a-radio>
                    <a-radio value={0}>否</a-radio>
                  </a-radio-group>
                </div>
              </div>
            )
          }
          {
            state.menu_type.value !== 'F' && (
              <div class={[styles.row, styles.rowHalf]}>
                <div class={styles.label}>
                  <a-tooltip placement="top" v-slots={{
                    title: () => (
                      <span class={styles.tooltip}>访问的路由地址，如：`user`，如外网地址需内链访问则以`http(s)://`开头</span>
                    )
                  }}>
                    <QuestionCircleFilled class={styles.infoIcon} />
                  </a-tooltip>
                  路由地址:
                </div>
                <div class={styles.value}>
                  <a-input
                    v-model:value={state.path.value}
                    placeholder="请输入路由地址"
                  ></a-input>
                </div>
              </div>
            )
          }
          {
            state.menu_type.value !== 'M' && (
              <div class={[styles.row, styles.rowHalf]}>
                <div class={styles.label}>
                  <a-tooltip placement="top" v-slots={{
                    title: () => (
                      <span class={styles.tooltip}>控制器中定义的权限字符,多个权限;分割</span>
                    )
                  }}>
                    <QuestionCircleFilled class={styles.infoIcon} />
                  </a-tooltip>
                  权限字符:
                </div>
                <div class={styles.value}>
                  <a-input
                    v-model:value={state.perms.value}
                    placeholder="请输入权限字符"
                  ></a-input>
                </div>
              </div>
            )
          }
          {
            state.menu_type.value === 'C' && (
              <div class={[styles.row, styles.rowHalf]}>
                <div class={styles.label}>
                  <a-tooltip placement="top" v-slots={{
                    title: () => (
                      <span class={styles.tooltip}>选择是则会被`keep-alive`缓存，需要匹配组件的`name`和地址保持一致</span>
                    )
                  }}>
                    <QuestionCircleFilled class={styles.infoIcon} />
                  </a-tooltip>
                  是否缓存:
                </div>
                <div class={styles.value}>
                  <a-radio-group
                    v-model:value={state.is_cache.value}
                    name="radioGroup"
                  >
                    <a-radio value={1}>缓存</a-radio>
                    <a-radio value={0}>不缓存</a-radio>
                  </a-radio-group>
                </div>
              </div>
            )
          }
          {
            state.menu_type.value !== 'F' && (
              <div class={[styles.row, styles.rowHalf]}>
                <div class={styles.label}>
                  <a-tooltip placement="top" v-slots={{
                    title: () => (
                      <span class={styles.tooltip}>选择隐藏则路由将不会出现在侧边栏，但仍然可以访问</span>
                    )
                  }}>
                    <QuestionCircleFilled class={styles.infoIcon} />
                  </a-tooltip>
                  显示状态:
                </div>
                <div class={styles.value}>
                  <a-radio-group
                    v-model:value={state.visible.value}
                    name="radioGroup"
                  >
                    <a-radio value={"1"}>显示</a-radio>
                    <a-radio value={"0"}>隐藏</a-radio>
                  </a-radio-group>
                </div>
              </div>
            )
          }
          {
            state.menu_type.value !== 'F' && (
              <div class={[styles.row, styles.rowHalf]}>
                <div class={styles.label}>
                  <a-tooltip placement="top" v-slots={{
                    title: () => (
                      <span class={styles.tooltip}>选择停用则路由将不会出现在侧边栏，也不能被访问</span>
                    )
                  }}>
                    <QuestionCircleFilled class={styles.infoIcon} />
                  </a-tooltip>
                  菜单状态:
                </div>
                <div class={styles.value}>
                  <a-radio-group
                    v-model:value={state.status.value}
                    name="radioGroup"
                  >
                    <a-radio value={"1"}>正常</a-radio>
                    <a-radio value={"0"}>停用</a-radio>
                  </a-radio-group>
                </div>
              </div>
            )
          }
          <div class={styles.buttonBox}>
            <a-button
              type="primary"
              loading={editing.value}
              onClick={() => { save() }}
            >
              保存
            </a-button>
          </div>
        </div>
      </LPopup>
    );
    return {
      Components,
    };
  },
  render() {
    return <this.Components />;
  },
});
